<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" media="screen and (max-width:800px)" href="css/tel.css">
    <link rel="stylesheet" media="screen and (min-width:801px) and (max-width:1200px)" href="css/pc.css"> -->
    <link rel="stylesheet" href="css/commo.css">
</head>
<body>
    <div>
        响应式布局
    </div>
    <p>有的时候你会发现一个奇怪的问题，就是你的 @media 没有起作用。我们知道min-width表示最小即大于等于（>=），max-width 表示最大即小于等于（<=），代码从上往下依次执行，后面重复代码会覆盖之前的代码。正确的适配顺序如下：

        max-width:num0;：小于等于，分辨率从大写到小，如果同一选择器</p>
</body>
</html>